<style lang="less" scoped>
    @import "./user-permission.less";
</style>

<template>
    <Card>
        <Spin size="large" fix v-if="pageLoading">
            <Icon type="load-c" size="23" style="animation: ani-demo-spin 1s linear infinite;"></Icon>
            <div>加载中...</div>
        </Spin>
        <Row :gutter="8">
            <Col span="4" class-name="right-border" style="padding-right: 10px">
                <Row class-name="center">
                    <Input v-model="queryUserParams.queryKey" placeholder="输入 “登录名、用户名、手机号”" style="width: 100%;" clearable @on-keydown.enter="quaerUserData(true)"></Input>
                </Row>
                <Table
                    size="small" 
                    :columns="userTableColumns" 
                    :data="userTableData.list" 
                    :loading="userTableLoading" 
                    @on-current-change="setCurrentUser" 
                    highlight-row/>
                <div style="margin: 10px;overflow: hidden;height: 80px;">
                    <div style="float: right;">
                        <Page 
                            simple
                            size="small"
                            show-total 
                            show-elevator
                            :total="userTableData.total" 
                            :current="userTableData.pageNum" 
                            :page-size="userTableData.pageSize" 
                            placement="top" 
                            @on-change="userPageChange"
                            @on-page-size-change="userPageSizeChange"
                        />
                    </div>
                </div>
            </Col>
            <Col span="6" style="padding: 0 10px">
                <Row class-name="center">
                    <Input v-model="queryRolesParams.name" placeholder="输入角色名称模糊匹配" style="width: 100%;" clearable @on-keydown.enter="queryRolesData(true)"></Input>
                </Row>
                <Table
                    size="small" 
                    :columns="rolesTableColumns" 
                    :data="rolesTableData.list" 
                    :loading="rolesTableLoading" 
                    @on-current-change="setCurrentRole" 
                    highlight-row
                    border/>
                <div style="margin: 10px;overflow: hidden;height: 80px;">
                    <div style="float: right;">
                        <Page 
                            simple
                            size="small"
                            show-total 
                            show-elevator
                            :total="rolesTableData.total" 
                            :current="rolesTableData.pageNum" 
                            :page-size="rolesTableData.pageSize" 
                            placement="top" 
                            @on-change="rolesPageChange"
                            @on-page-size-change="rolesPageSizeChange"
                        />
                    </div>
                </div>
            </Col>
            <Col span="14" class-name="left-border" style="padding-left: 10px">
                <Form :model="queryPermissionParams" :label-width="75" :inline="false">
                    <Row :gutter="8">
                        <Col span="6">
                            <FormItem label="系统名称" prop="module">
                                <Select v-model="queryPermissionParams.module" placeholder="请选择" clearable @on-change="queryPermissionByRole(true)">
                                    <Option v-for="item in allModule" :key="item" :value="item">{{ item }}</Option>
                                </Select >
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="权限标题" prop="title">
                                <Input v-model="queryPermissionParams.title" placeholder="模糊匹配" clearable @on-keydown.enter="queryPermissionByRole(true)"></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="权限字符串" prop="permission">
                                <Input v-model="queryPermissionParams.permission" placeholder="模糊匹配" clearable @on-keydown.enter="queryPermissionByRole(true)"></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="资源类型" prop="resourcesType">
                                <Select v-model="queryPermissionParams.resourcesType" placeholder="请选择" clearable @on-change="queryPermissionByRole(true)">
                                    <Option v-for="item in resourcesTypeArray" :key="item.value" :value="item.value">{{ item.label }}</Option>
                                </Select >
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table size="small" :columns="permissionTableColumns" :data="permissionTableData.list" :loading="permissionTableLoading" stripe border/>
                <div style="margin: 10px;overflow: hidden;height: 80px;">
                    <div style="float: right;">
                        <Page 
                            size="small"
                            show-total 
                            show-elevator 
                            show-sizer
                            :page-size-opts="[10, 15, 50, 100]"
                            :total="permissionTableData.total" 
                            :current="permissionTableData.pageNum" 
                            :page-size="permissionTableData.pageSize" 
                            placement="top" 
                            @on-change="permissionPageChange"
                            @on-page-size-change="permissionPageSizeChange"
                        />
                    </div>
                </div>
            </Col>
        </Row>
    </Card>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
    data () {
        return {
            resourcesTypeArray: [
                { value: '1', label: '自动生成' },
                { value: '2', label: '自定义' },
            ],
            userTableColumns: [
                { title: '登录名(用户名)', key: 'username', ellipsis: true, render: (h, { row }) => { return h('span', `${row.username}(${row.nickname})`) }}
            ],
            rolesTableColumns: [
                // { title: '#', type: 'index', width: 60, align: 'center' },
                { title: '授权', key: 'exists', width: 70, align: 'center',  render: (h, { row }) => {
                    return h('Checkbox', { 
                        props: { value: row.exists },
                        on: { 'on-change': exists => this.addOrRomveUserRole({ exists, row }) } 
                    }, '');
                }},
                { title: '角色名称', key: 'roleName', ellipsis: true }
            ],
            permissionTableColumns: [
                // { title: '授权', type: 'selection', width: 60, align: 'center' },
                { title: '授权', key: 'exists', width: 70, align: 'center',  render: (h, { row }) => {
                    return h('Checkbox', { 
                        props: { value: row.exists },
                        on: { 'on-change': exists => this.addOrRomveRolePermission({ exists, row }) } 
                    }, '');
                }},
                { title: '系统名称', key: 'module', ellipsis: true, width: 150 },
                { title: '权限标题', key: 'title', ellipsis: true, width: 260 },
                { title: '权限标识字符串', key: 'permission', ellipsis: true, width: 360 },
                { title: '权限类型', key: 'resourcesType', ellipsis: true, render: (h, { row }) => {
                    let resourcesType = this.$data.resourcesTypeArray.find(item => item.value==row.resourcesType);
                    if(!resourcesType || !resourcesType.label){
                        resourcesType = { value: '', label: '未知' }
                    }
                    return h('span', resourcesType.label);
                }}
            ],
        };
    },
    mounted() {
        if (!this.rolesTableData.navigatepageNums){
            this.quaerUserData();
            this.getAllModule();
        }
    },
    computed: {
        ...mapState('UserPermission', [
            'pageLoading', 
            'allModule', 
            'queryUserParams',
            'userTableLoading',
            'userTableData',
            'currentUser',
            'queryRolesParams', 
            'rolesTableLoading', 
            'rolesTableData', 
            'queryPermissionParams', 
            'permissionTableLoading', 
            'permissionTableData']
            )
    },
    methods: {
        ...mapActions('UserPermission', [
            'setCurrentRole', 
            'setCurrentUser',
            'getAllModule', 
            'quaerUserData',
            'queryRolesData', 
            'addOrRomveUserRole', 
            'queryPermissionByRole', 
            'addOrRomveRolePermission']
            ),
        // ...mapMutations('UserPermission', ['setCurrentRole']),
        userPageChange(pageNo) {
            if (this.queryUserParams.pageNo !== pageNo){
                this.queryUserParams.pageNo = pageNo;
                this.quaerUserData();
            }
        },
        userPageSizeChange(pageSize) {
            if (this.queryUserParams.pageSize !== pageSize) {
                this.queryUserParams.pageNo = 1;
                this.queryUserParams.pageSize = pageSize;
                this.quaerUserData();
            }
        },
        rolesPageChange(pageNo) {
            if (this.queryRolesParams.pageNo !== pageNo){
                this.queryRolesParams.pageNo = pageNo;
                this.queryRolesData();
            }
        },
        rolesPageSizeChange(pageSize) {
            if (this.queryRolesParams.pageSize !== pageSize) {
                this.queryRolesParams.pageNo = 1;
                this.queryRolesParams.pageSize = pageSize;
                this.queryRolesData();
            }
        },
        permissionPageChange(pageNo) {
            if (this.queryPermissionParams.pageNo !== pageNo){
                this.queryPermissionParams.pageNo = pageNo;
                this.queryPermissionByRole();
            }
        },
        permissionPageSizeChange(pageSize) {
            if (this.queryPermissionParams.pageSize !== pageSize) {
                this.queryPermissionParams.pageNo = 1;
                this.queryPermissionParams.pageSize = pageSize;
                this.queryPermissionByRole();
            }
        },
    }
};
</script>
